<template>
	<view class="wrapper" :style="{padding:`calc(280rpx + ${safeTop}px) 0 0`}">
		<div class="posf">
			<div class="header " :style="{padding:`${safeTop}px 30rpx 55rpx`}">
				<image src="../../static/shouye/top1.png" mode="aspectFill" class="top-icon"></image>
			</div>
			<div class="nav-bar mb30">
				<div class="keyword flex-start bfff">
					<u-icon name="search" color="#999999" size="20"></u-icon>
					<input type="text" placeholder="输入关键词" placeholder-class="c999 f26" class="ml15" v-model="keyWords"
						@confirm="setNav(navIndex)" />
				</div>
				<div class="main f32 ">
					<!-- <div class="posr center active mr30 ml30" >
						<image src="../../static/shouye/icon.png" mode="widthFix" class="hot-icon"></image>
						<div class="f32 ml5 ">热门</div>
					</div> -->
					<div class="posr mr25" :class="navIndex==i?'active':''" v-for="(v,i) in brand" :key="i"
						@click="setNav(i)">{{v.brand}}</div>
				</div>
			</div>
		</div>
		<!-- <div class="title-bar center f24 c000">
			<div class="flex1">全部</div>
			<div class="mr30">100-500积分</div>
			<image src="../../static/shouye/down-icon.png" mode="widthFix" class="down-icon"></image>
		</div> -->
		<div class="goods-box fWrap space-between">
			<div class="bfff detail mb20" v-for="(v,i) in list" :key="i">
				<div class="center mb30" @click="goDetail(v)">
					<image :src="v.poster[0]" mode="aspectFill" class="logo-icon mr10"></image>
					<div class="f26 flex1 text1 line2">{{v.name}}</div>
				</div>
				<div class="goodsPoint center">
					<div class="ctheme flex1 f22"><span class="fbold t-text">{{v.price}}</span>积分</div>
					<div class="change-btn center f24" @click="open(v)">兑换</div>
				</div>
			</div>
		</div>
		<!-- 兑换弹出层 -->
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="bottom" bgColor="transparent">
			<duiHuan url='dzq' :detail='detail' @close='close'></duiHuan>
		</u-popup>
		<!-- <div class="c999 mt50 tCenter mb50">没有更多了</div> -->
		<!-- 暂无更多 -->
		<u-empty v-if="list.length==0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
	</view>
</template>

<script>
	import duiHuan from '/components/duiHuan'
	export default {
		data() {
			return {
				navIndex: 0,
				brand: [],
				pageNum: 1,
				pageSize: 20,
				list: [],
				keyWords: '',
				show: false,
				detail: {}
			}
		},
		onLoad() {
			this.getelecVouchersbrand()
		},
		onShareAppMessage: function () {
		    return {
		      title: '分享',
		      path: '/shouye/shouye?id=123'
		    }
		  },
		components: {
			duiHuan
		},
		onReachBottom() {
			this.pageNum++
			this.getelecVoucherslist()
		},
		methods: {
			open(v) {
				if (!uni.getStorageSync('uInfo')) {
					uni.navigateTo({
						url: '/pages/dengLu/dengLu'
					})
					return
				}
				this.detail = v
				this.show = true
			},
			close() {
				this.show = false
			},
			// 切换顶部分类
			setNav(i) {
				this.navIndex = i
				this.pageNum = 1
				this.list = []
				this.getelecVoucherslist()
			},
			// 查询正在上架的本地生活电子券品牌
			getelecVouchersbrand() {
				this.$http('/api/elecVouchers/brand').then((r) => {
					this.brand = r.data
					this.setNav(0)
				})
			},
			// 查询正在上架本地生活电子券
			getelecVoucherslist() {
				this.$http('/api/elecVouchers/list', {
					brand: this.brand[this.navIndex].brand,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keyWords: this.keyWords
				}).then((r) => {
					this.list = this.list.concat(r.data.map(v => {
						v.poster = v.poster.split(',')
						return v
					}))
				})
			},
			// 去详情页面
			goDetail(v) {
				uni.navigateTo({
					url: '../benDi/xiangXi?id=' + v.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-box {
		padding: 0 20rpx;

		.detail:not(:nth-of-type(2n)) {
			margin-right: 10rpx;
		}

		.detail {
			width: 345rpx;
			box-shadow: 0rpx 0rpx 16rpx 2rpx #F1F2F3;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			padding: 10rpx 10rpx 15rpx;
			// overflow: hidden;

			.goodsPoint {
				width: 294rpx;
				height: 48rpx;
				border-radius: 23rpx 23rpx 23rpx 23rpx;
				background: #FFF1D2;
				margin: 0 auto;

				.t-text {
					font-size: 32rpx;
					margin-left: 20rpx;
					color: #FF5555;
				}

				.change-btn {
					width: 100rpx;
					height: 48rpx;
					border-radius: 30rpx;
					color: #6E482A;
					background: #F7E8CB;
				}
			}

			.logo-icon {
				width: 95rpx;
				height: 95rpx;
				border-radius: 15rpx;
			}

			.text1 {
				line-height: 47rpx;
			}
		}
	}

	.title-bar {
		padding: 0 25rpx 40rpx 75rpx;

		.down-icon {
			width: 26rpx;
			height: 26rpx;
		}
	}

	.nav-bar {
		width: 100%;
		background: linear-gradient(to bottom, #FEDAEB, #FDFAFB);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 25rpx 25rpx 0;
		margin-top: -33rpx;
		// box-shadow: 4rpx 0rpx 3rpx 0rpx #FF5859;
		box-shadow: 0rpx -4rpx 6rpx 0 #FF5859;

		.keyword {
			padding-left: 20rpx;
			width: 675rpx;
			height: 50rpx;
			box-shadow: 0rpx 0rpx 16rpx 2rpx #FDCBE0;
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			margin: 0 auto 35rpx;
		}

		.main {
			padding-bottom: 30rpx;
			white-space: nowrap;
			overflow-y: scroll;

			.posr {
				display: inline-block;
			}

			.active {
				color: #FF5555;
				font-weight: 800;

				&::after {
					content: '';
					position: absolute;
					left: calc(50% - 40rpx);
					bottom: -28rpx;
					background-color: #FD7D7E;
					width: 80rpx;
					height: 8rpx;
					border-radius: 35rpx 35rpx 0 0;
				}
			}

			.hot-icon {
				width: 25rpx;
				height: 33rpx;
			}
		}
	}

	.posf {
		top: 0;
		left: 0;
		z-index: 5;
		width: 100%;
	}

	.header {

		background: linear-gradient(to left, #F857A5, #FF5858);

		padding-left: 30rpx;
		padding-bottom: 55rpx;

		.top-icon {
			width: 182rpx;
			height: 52rpx;
		}
	}
</style>